<template>
  <div id="app">
    <div class="header">
      <Header></Header>
    </div>
    <div class="main">
      <!--地域-->
      <div class="w1190">
        <div class="map-nav">
          <a href="">网点查询 </a>
          <i class="arrow-right-gray"></i>
          <span>长沙</span>
        </div>
        <div class="map-header">
          <div class="lable-list overfloat borderbtm">
            <label class="bold fleft">
              长沙
              <a href="" class="mRnone">[更换城市]</a>
            </label>
            <div class="fleft w940">
              <a href="">雨花区</a>
              <a href="">芙蓉区</a>
              <a href="">长沙县</a>
              <a href="">天心区</a>
              <a href="">开福区</a>
              <a href="">岳麓区</a>
              <a href="">宁乡县</a>
              <a href="">望城区</a>
              <a href="">汨罗市</a>
            </div>
            <div class="clear"></div>
          </div>
          <div class="lable-list borderbtm">
            <label>热门城市</label>
            <a href="">北京</a>
            <a href="">天津</a>
            <a href="">上海</a>
            <a href="">广州</a>
            <a href="">深圳</a>
            <a href="">成都</a>
            <a href="">武汉</a>
            <a href="">长沙</a>
            <a href="">杭州</a>
            <a href="">西安</a>
            <a href="">三亚</a>
            <a href="">昆明</a>
            <a href="">重庆</a>
            <a href="">厦门</a>
            <a href="">南京</a>
          </div>
        </div>
      </div>
      <!--地图-->
      <div class="amap-wrapper" style="margin:auto;height: 600px;width: 1150px;">
        <el-amap class="amap-box" :center="[112.979352788,28.2134782309]"  :viewMode="'3D'" :vid="'amap-vue'"></el-amap>
      </div>
    </div>
    <div class="footer" style="margin-top: 50px">
      <Footer></Footer>
    </div>
  </div>
</template>

<script>
  import Header from "../components/Header";
  import Footer from "../components/Footer";

  export default {
    name: "Point",
    components: {
      Header,
      Footer
    }
  }
</script>

<style scoped>
  .w1190 {
    width: 1200px;
    margin: 0 auto;
  }
  .map-nav {
    font-size: 14px;
    font-family: Arial,PingFang-SC-Regular,Microsoft Yahei,Hiragino Sans GB,tahoma,STHeiTi;
    font-weight: 400;
    color: rgba(23,23,33,.6);
    line-height: 60px;
    padding-left: 30px;
  }
  .map-nav a {
    color: #171721;
  }
  a {
    text-decoration: none;
    outline: 0;
  }
  a {
    cursor: pointer;
  }
  .map-nav .arrow-right-gray {
    margin: 0 3px;
  }
  .arrow-right-gray {
    display: inline-block;
    width: 5px;
    height: 9px;
    background: url(https://image.zuchecdn.com/webfe/arrow-right-gray.png) no-repeat center center;
  }
  i {
    font-style: italic;
  }
  .map-header {
    padding: 0 30px 30px;
    background-color: #fff;
  }
  .map-header .lable-list.overfloat {
    overflow: hidden;
    zoom: 1;
    padding-left: 0;
  }
  .map-header .lable-list.borderbtm {
    border-bottom: 1px solid #e5e5e5;
  }
  .map-header .lable-list {
    min-height: 22px;
    padding: 20px 0 20px 110px;
    position: relative;
    font-size: 16px;
    font-weight: 400;
    color: rgba(23,23,33,.6);
    line-height: 22px;
  }
  .map-header .lable-list.overfloat .fleft {
    float: left;
  }

  .map-header .lable-list.overfloat label {
    position: static;
    top: 0;
  }
  .map-header .lable-list label.bold {
    font-size: 18px;
    font-weight: 700;
    color: #171721;
  }
  .map-header .lable-list label {
    left: 0;
  }

  .map-header .lable-list a, .map-header .lable-list label {
    line-height: 30px;
    display: inline-block;
  }
  label {
    cursor: default;
  }
  .map-header a.mRnone {
    margin: 0;
    color: #2b99ff;
    font-size: 16px;
    font-weight: 400;
  }
  .map-header .lable-list a, .map-header .lable-list label {
    line-height: 30px;
    display: inline-block;
  }
  .map-header .lable-list {
    min-height: 22px;
    padding: 20px 0 20px 110px;
    position: relative;
    font-size: 16px;
    font-weight: 400;
    color: rgba(23,23,33,.6);
    line-height: 22px;
  }
  .map-header .lable-list a {
    color: #171721;
    margin-right: 20px;
  }
  .map-header .lable-list a, .map-header .lable-list label {
    line-height: 30px;
    display: inline-block;
  }
  .clear {
    clear: both;
  }
  .map-header .lable-list.borderbtm {
    border-bottom: 1px solid #e5e5e5;
  }

  .map-header .lable-list {
    min-height: 22px;
    padding: 20px 0 20px 110px;
    position: relative;
    font-size: 16px;
    font-weight: 400;
    color: rgba(23,23,33,.6);
    line-height: 22px;
  }
  .map-header .lable-list label {
    position: absolute;
    top: 20px;
    left: 0;
  }

  .map-header .lable-list a, .map-header .lable-list label {
    line-height: 30px;
    display: inline-block;
  }
  .map-header .lable-list a {
    color: #171721;
    margin-right: 20px;
  }

  .map-header .lable-list a, .map-header .lable-list label {
    line-height: 30px;
    display: inline-block;
  }
  .map-header a.mRnone {
    margin: 0;
    color: #2b99ff;
    font-size: 16px;
    font-weight: 400;
    margin-right: 20px;
  }
</style>
